
<template>
  <div class="span_progress">
    <el-progress :percentage="percentage" :color="customColor"></el-progress>

    <el-progress
      :percentage="percentage"
      :color="customColorMethod"
    ></el-progress>

    <el-progress :percentage="percentage" :color="customColors"></el-progress>
    <div>
      <el-button-group>
        <el-button icon="el-icon-minus" @click="decrease"></el-button>
        <el-button icon="el-icon-plus" @click="increase"></el-button>
      </el-button-group>
    </div>
    <el-row :gutter="20" v-for="item in progressList" :key="item.id">
        <el-col style="width:80px">{{item.name}}</el-col>
        <el-col style="width:calc(100% - 80px)">
            <el-progress :percentage="calculate(item)" :stroke-width="10" :format="format(item)"></el-progress>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progressList: [
        {
            planNum: 0,   // 计划数量
            completeNum: 0,  // 完成数量
            id:1,
            name:"特讯室"
        },
        {
            planNum: 17,
            completeNum: 7,
            id:2,
            name:"询问室"
        },
        {
            planNum: 19,
            completeNum: 11,
            id:3,
            name:"讯问室"
        }
      ],
      percentage: 20,
      customColor: "#409eff",
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
    };
  },
  methods: {
      format(row) {
          console.log(row);
          return () => {
              return row.completeNum + '/' + row.planNum;
            }
      },
      calculate(row){
          if(row.planNum == 0){
              return 0
          }else{
             return parseInt(((row.completeNum/row.planNum)*100).toFixed(0));
          }
      },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    increase() {
      this.percentage += 8;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.span_progress{
    // background: yellow;
    /deep/.el-progress-bar{
        margin-right: -60px;
        padding-right: 60px;
    }
    /deep/ .el-progress__text  {
        width: 50px;
    }
}
    
</style>